<script lang="ts" setup>

import {h, onMounted, reactive} from "vue";
import {NButton, NSpace} from "naive-ui";
import {BaseColumn, BaseInput, BasePage, BaseRule, completePage} from "../../../../ts/type";
import {replace, stampToDatetimeText} from "../../../../ts/util";
import {extraConfig} from "../entityInfoPageConfig";

let page: BasePage = reactive(new BasePage())
completePage(page)
page.search.formInputs = [
  new BaseInput('表前缀', 'prefix'),
  new BaseInput('包路径', 'pathName'),
  new BaseInput('包名', 'packageName'),
  new BaseInput('表名', 'tableName'),
  replace(new BaseInput('默认从多少起', 'autoFirst'), {
    inputType: 'number'
  }),
  new BaseInput('时间格式化字符串', 'autoDate'),
  replace(new BaseInput('search value字段', 'searchValue'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('search label字段', 'searchLabel'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('select value字段', 'selectValue'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('select label字段', 'selectLabel'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  new BaseInput('注释', 'remark'),
  new BaseInput('类名', 'className'),
  replace(new BaseInput('修改时间', 'updateTime'), {
    inputType: 'dateRange'
  }),
  replace(new BaseInput('创建时间', 'createTime'), {
    inputType: 'dateRange'
  }),
  new BaseInput('修改人', 'updateBy'),
  new BaseInput('创建人', 'createBy'),
  new BaseInput('模块名', 'moduleName')
]
let saveModel = page.models.filter(m => 'save' == m.formKey)[0]
saveModel.formInputs = [
  replace(new BaseInput('表前缀', 'prefix'), {
    span: 12
  }),
  replace(new BaseInput('包路径', 'pathName'), {
    span: 12
  }),
  replace(new BaseInput('包名', 'packageName'), {
    span: 12
  }),
  replace(new BaseInput('表名', 'tableName'), {
    span: 12
  }),
  replace(new BaseInput('默认从多少起', 'autoFirst'), {
    inputType: 'number',
    span: 12
  }),
  replace(new BaseInput('时间格式化字符串', 'autoDate'), {
    span: 12
  }),
  replace(new BaseInput('search value字段', 'searchValue'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('search label字段', 'searchLabel'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('select value字段', 'selectValue'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('select label字段', 'selectLabel'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('注释', 'remark'), {
    span: 12
  }),
  replace(new BaseInput('类名', 'className'), {
    span: 12
  }),
  replace(new BaseInput('模块名', 'moduleName'), {
    span: 12
  })
]
saveModel.rules = {
  prefix: new BaseRule(),
  tableName: new BaseRule(),
  remark: new BaseRule(),
  moduleName: new BaseRule()
}
let updateModel = page.models.filter(m => 'update' == m.formKey)[0]
updateModel.formInputs = [
  replace(new BaseInput('表前缀', 'prefix'), {
    span: 12
  }),
  replace(new BaseInput('包路径', 'pathName'), {
    span: 12
  }),
  replace(new BaseInput('包名', 'packageName'), {
    span: 12
  }),
  replace(new BaseInput('表名', 'tableName'), {
    span: 12
  }),
  replace(new BaseInput('默认从多少起', 'autoFirst'), {
    inputType: 'number',
    span: 12
  }),
  replace(new BaseInput('时间格式化字符串', 'autoDate'), {
    span: 12
  }),
  replace(new BaseInput('search value字段', 'searchValue'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('search label字段', 'searchLabel'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('select value字段', 'selectValue'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('select label字段', 'selectLabel'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('注释', 'remark'), {
    span: 12
  }),
  replace(new BaseInput('类名', 'className'), {
    span: 12
  }),
  replace(new BaseInput('模块名', 'moduleName'), {
    span: 12
  })
]
updateModel.rules = {
  prefix: new BaseRule(),
  tableName: new BaseRule(),
  remark: new BaseRule(),
  moduleName: new BaseRule()
}
let detailModel = page.models.filter(m => 'detail' == m.formKey)[0]
detailModel.formInputs = [
  replace(new BaseInput('表前缀', 'prefix'), {
    span: 12
  }),
  replace(new BaseInput('包路径', 'pathName'), {
    span: 12
  }),
  replace(new BaseInput('包名', 'packageName'), {
    span: 12
  }),
  replace(new BaseInput('表名', 'tableName'), {
    span: 12
  }),
  replace(new BaseInput('默认从多少起', 'autoFirst'), {
    inputType: 'number',
    span: 12
  }),
  replace(new BaseInput('时间格式化字符串', 'autoDate'), {
    span: 12
  }),
  replace(new BaseInput('search value字段', 'searchValue'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('search label字段', 'searchLabel'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('select value字段', 'selectValue'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('select label字段', 'selectLabel'), {
    inputType: 'select',
    options: [],
    optionsUrl: '/au/fieldInfo/select'
  }),
  replace(new BaseInput('注释', 'remark'), {
    span: 12
  }),
  replace(new BaseInput('类名', 'className'), {
    span: 12
  }),
  replace(new BaseInput('修改时间', 'updateTime'), {
    inputType: 'datetime',
    span: 12
  }),
  replace(new BaseInput('创建时间', 'createTime'), {
    inputType: 'datetime',
    span: 12
  }),
  replace(new BaseInput('修改人', 'updateBy'), {
    span: 12
  }),
  replace(new BaseInput('创建人', 'createBy'), {
    span: 12
  }),
  replace(new BaseInput('模块名', 'moduleName'), {
    span: 12
  })
]
page.url = {
  save: '/au/entityInfo/save',
  updateById: '/au/entityInfo/updateById',
  deleteById: '/au/entityInfo/deleteById',
  selectById: '/au/entityInfo/selectById',
  selectPage: '/au/entityInfo/selectPage'
}
page.columns = [
  replace(new BaseColumn('index', ''), {
    width: 60
  }),
  replace(new BaseColumn('id', 'ID'), {
    sorter: 'default',
    defaultSortOrder: 'descend',
    width: 80
  }),
  new BaseColumn('prefix', '表前缀'),
  new BaseColumn('pathName', '包路径'),
  new BaseColumn('packageName', '包名'),
  new BaseColumn('tableName', '表名'),
  new BaseColumn('autoFirst', '默认从多少起'),
  new BaseColumn('autoDate', '时间格式化字符串'),
  new BaseColumn('searchValue', 'search value字段'),
  new BaseColumn('searchLabel', 'search label字段'),
  new BaseColumn('selectValue', 'select value字段'),
  new BaseColumn('selectLabel', 'select label字段'),
  new BaseColumn('remark', '注释'),
  new BaseColumn('className', '类名'),
  replace(new BaseColumn('updateTime', '修改时间'), {
    render: (row: any) => {
      return h('span', stampToDatetimeText(row.updateTime))
    }
  }),
  replace(new BaseColumn('createTime', '创建时间'), {
    render: (row: any) => {
      return h('span', stampToDatetimeText(row.createTime))
    }
  }),
  new BaseColumn('updateBy', '修改人'),
  new BaseColumn('createBy', '创建人'),
  new BaseColumn('moduleName', '模块名'),
  new BaseColumn('searchValueFieldName', '属性名'),
  new BaseColumn('searchLabelFieldName', '属性名'),
  new BaseColumn('selectValueFieldName', '属性名'),
  new BaseColumn('selectLabelFieldName', '属性名')
]

extraConfig(page)

onMounted(() => {
  page.loadData()
})
</script>

<template>
  <n-card title="entity信息">
    <n-form
        v-bind="page.search"
    >
      <n-grid :cols="24" :x-gap="24">
        <template v-for="input in page.search.formInputs">
          <n-form-item-gi v-if="input.inputType == 'text'" v-bind="input">
            <n-input v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-if="input.inputType == 'number'" v-bind="input">
            <n-input-number v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-if="input.inputType == 'select'" v-bind="input">
            <n-select v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-if="input.inputType == 'date'" v-bind="input">
            <n-date-picker v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-if="input.inputType == 'datetime'" v-bind="input">
            <n-date-picker v-model:value="page.search.model[input.path]" type="datetime" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-if="input.inputType == 'dateRange'" v-bind="input">
            <n-date-picker v-model:value="page.search.model[input.path]" type="daterange" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-if="input.inputType == 'datetimeRange'" v-bind="input">
            <n-date-picker v-model:value="page.search.model[input.path]" type="datetimerange" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-if="input.inputType == 'radio'" v-bind="input">
            <n-radio-group v-model:value="page.search.model[input.path]" v-bind="input">
              <n-space>
                <n-radio v-for="o in input.options" :key="input.path" :value="o.value">
                  {{ o.label }}
                </n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item-gi>
          <n-form-item-gi v-if="input.inputType == 'checkbox'" v-bind="input">
            <n-checkbox-group v-model:value="page.search.model[input.path]" v-bind="input">
              <n-space>
                <n-checkbox v-for="o in input.options" :label="o.label" :value="o.value"/>
              </n-space>
            </n-checkbox-group>
          </n-form-item-gi>
          <n-form-item-gi v-if="input.inputType == 'transfer'" v-bind="input">
            <n-transfer v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
          <n-form-item-gi v-if="input.inputType == 'tag'" v-bind="input">
            <n-dynamic-tags v-model:value="page.search.model[input.path]" v-bind="input"/>
          </n-form-item-gi>
        </template>
      </n-grid>

      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="12">
          <n-space>
            <template
                v-for="btn in page.leftOperations"
            >
              <n-button
                  v-if="btn.exist"
                  :type="btn.type"
                  :block="btn.block"
                  :circle="btn.circle"
                  :color="btn.color"
                  :dashed="btn.dashed"
                  :disabled="btn.disabled"
                  :ghost="btn.ghost"
                  :round="btn.round"
                  :size="btn.size"
                  :text-color="btn.textColor"
                  @click="btn.click"
              >
                {{ btn.text }}
              </n-button>
            </template>
          </n-space>
        </n-form-item-gi>
        <n-form-item-gi :span="12">
          <n-space justify="end">
            <template
                v-for="btn in page.rightOperations"
            >
              <n-button
                  v-if="btn.exist"
                  :type="btn.type"
                  :block="btn.block"
                  :circle="btn.circle"
                  :color="btn.color"
                  :dashed="btn.dashed"
                  :disabled="btn.disabled"
                  :ghost="btn.ghost"
                  :round="btn.round"
                  :size="btn.size"
                  :text-color="btn.textColor"
                  @click="btn.click"
              >
                {{ btn.text }}
              </n-button>
            </template>
          </n-space>
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <n-data-table
        :bordered="false"
        :checked-row-keys="page.checkedRowKeys"
        :columns="[...page.columns.filter(c => c.exist), page.operationColumn]"
        :data="page.data"
        :loading="page.loading"
        :pagination="page.pagination"
        :row-key="(row: any) => row.id"
        remote
        @update:sorter="page.changeSort"
    />
    <n-modal
        v-model:show="page.currentModel.exist"
        :bordered="false"
        :mask-closable="false"
        :style="page.currentModel.formStyle"
        preset="card"
        :size="page.currentModel.size"
        :title="page.currentModel.formTitle"
    >
      <n-form
          :ref="page.bind"
          :disabled="page.currentModel.disabled"
          :label-width="page.currentModel.labelWidth"
          :key="page.currentModel.formKey"
          :model="page.currentModel.model"
          :inline="page.currentModel.inline"
          :rules="page.currentModel.rules"
          :label-align="page.currentModel.labelAlign"
          :label-placement="page.currentModel.labelPlacement"
          :require-mark-placement="page.currentModel.requireMarkPlacement"
          :size="page.currentModel.size"
      >
        <n-grid :cols="24" :x-gap="24">
          <template v-for="input in page.currentModel.formInputs">
            <n-form-item-gi v-if="input.inputType == 'text'" v-bind="input">
              <n-input v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-if="input.inputType == 'number'" v-bind="input">
              <n-input-number v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-if="input.inputType == 'select'" v-bind="input">
              <n-select v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-if="input.inputType == 'date'" v-bind="input">
              <n-date-picker v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-if="input.inputType == 'datetime'" v-bind="input">
              <n-date-picker v-model:value="page.currentModel.model[input.path]" type="datetime" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-if="input.inputType == 'dateRange'" v-bind="input">
              <n-date-picker v-model:value="page.currentModel.model[input.path]" type="daterange" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-if="input.inputType == 'datetimeRange'" v-bind="input">
              <n-date-picker v-model:value="page.currentModel.model[input.path]" type="datetimerange" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-if="input.inputType == 'radio'" v-bind="input">
              <n-radio-group v-model:value="page.currentModel.model[input.path]" v-bind="input">
                <n-space>
                  <n-radio v-for="o in input.options" :key="input.path" :value="o.value">
                    {{ o.label }}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item-gi>
            <n-form-item-gi v-if="input.inputType == 'checkbox'" v-bind="input">
              <n-checkbox-group v-model:value="page.currentModel.model[input.path]" v-bind="input">
                <n-space>
                  <n-checkbox v-for="o in input.options" :label="o.label" :value="o.value"/>
                </n-space>
              </n-checkbox-group>
            </n-form-item-gi>
            <n-form-item-gi v-if="input.inputType == 'transfer'" v-bind="input">
              <n-transfer v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
            <n-form-item-gi v-if="input.inputType == 'tag'" v-bind="input">
              <n-dynamic-tags v-model:value="page.currentModel.model[input.path]" v-bind="input"/>
            </n-form-item-gi>
          </template>
        </n-grid>
      </n-form>
      <template #action>
        <n-space justify="end">
          <template
              v-for="btn in page.currentModel.modelOperations"
          >
            <n-button
                v-if="btn.exist"
                :type="btn.type"
                :block="btn.block"
                :circle="btn.circle"
                :color="btn.color"
                :dashed="btn.dashed"
                :disabled="btn.disabled"
                :ghost="btn.ghost"
                :round="btn.round"
                :size="btn.size"
                :text-color="btn.textColor"
                @click="btn.click"
            >
              {{ btn.text }}
            </n-button>
          </template>
        </n-space>
      </template>
    </n-modal>
  </n-card>
</template>

<style scoped>

</style>